<template>
	<view class="chart">
		<echarts class="echarts" :option="chartData" :project="project" />
		<!-- 	<u-cell-item :title-style="titleStyle" :title="i18n.gantt_interval_days" :arrow="false">
			<u-input v-model="interval" @input="changeInput()" type="text" :placeholder="''" :style="ipnutStyle"
				name="interval" :width="50" :border="true" />
		</u-cell-item> -->
	</view>
</template>

<script>
	import echarts from '@/components/echarts/index.vue';
	import pageMixin from '@/utils/pageMixin';
	export default {
		components: {
			echarts,
		},
		mixins: [pageMixin],
		props: {
			project: {
				type: String || Number,
				default: () => {
					return 0
				}
			},
		},
		data() {
			return {
				query: {
					pid: 0,
				},
				data: {},
				chartData: {},
				interval: 4,
				ipnutStyle: {
					"width": "70px",
				},
				titleStyle: {
					"float": "left",
				},
				chartsData: {},
			}
		},
		computed: {},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: this.$t('project.gantt')
			})
			this.query.pid = options.project || 0;
			this.loaded();
		},
		mounted() {
			this.query.pid = this.project
			this.loaded();
		},
		methods: {
			loaded() {
				var that = this;
				that.$http.get('/mgr/biz/gantt/task/gantt', that.query, this.$store.state.jHeader).then(res => {
					var startDate = res.MinStartTime || 0;
					var temp = res;
					if (JSON.parse(JSON.stringify(res.TaskNames)) != null) {
						for (var i = 0; i < JSON.parse(JSON.stringify(res.TaskNames)).length; i++) {
							if (res.TaskNames[i].length > 35) {
								res.TaskNames[i] = res.TaskNames[i].substring(0, 35) + '...';
							}
						}
					}
					var times = [];
					var days = [];
					var dayDict = [];
					that.chartData = {
						dataZoom: [{
							type: 'slider',
							show: true,
							yAxisIndex: 0,
							orient: 'vertical',
							zoomLock: true,
							left: '94%',
							brushSelect: false,
							startValue: 0,
							endValue: 5,
							showDetail: false,
							width: 22,
							height: 320,
							y: 20
						}, ],
						backgroundColor: "#fff",
						legend: {
							type: 'plain',
							data: [that.$t('project.gantt_schedule'), that.$t('project.gantt_actual')],
							align: "left",
							left: '50%',
						},
						grid: {
							left: '22%',
							right: '18%'
						},
						xAxis: {
							name: that.$t('project.gantt_commencement_days'),
							type: 'value',
							min: 1,
							interval: 4,
							startDate: startDate,
							axisLabel: {
								show: true,
								formatter: function(value, index) {
									var date = '';
									if (startDate > 0) {
										var time = new Date(startDate + ((value - 1) * 86400000))
										date = (time.getMonth() + 1) + "/" + time.getDate()
									}
									return value + "\n" + date;
								}
							}
						},
						yAxis: {
							name: that.$t('project.gantt_task_list'),
							type: 'category',
							data: res.TaskNames,
							nameTextStyle: {
								fontSize: 10,
								align: 'right'
							},
							max: 'dataMax',
							realtimeSort: true,
							axisLabel: {
								fontSize: 12,
								width: 130,
								overflow: 'break',
								formatter: function(value, index) {
									return value;
								}
							},
						},
						tooltip: {
							trigger: "axis",
							backgroundColor: '#fff',
							borderColor: '#e2e2e2',
							borderWidth: 1,
							textStyle: {
								color: '#333'
							},
							positionStatus: true,
							formatterStatus: true,
							temp: temp,
							lang: {
								gantt_planned_days: that.$t('project.gantt_planned_days'),
								gantt_days: that.$t('project.gantt_days'),
								gantt_actual_days: that.$t('project.gantt_actual_days'),
							},
							formatter: function(params) {
								var name = params[0].name
								var res = name + "</br>"
								var planDay = params[1].data || 0;
								var realDay = params[3].data || 0;
								realDay += 1;
								// res += "计划天数：" + planDay + "天" + "</br>"
								var date0 = temp.PlanStartTimes[name] || 0;
								var date1 = temp.PlanFinishTimes[name] || 0;
								var date2 = temp.RealStartTimes[name] || 0;
								var date3 = temp.RealFinishTimes[name] || 0;
								if (date0 > 0 && date1 > 0) {
									date0 = new Date(date0)
									date1 = new Date(date1)
									date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" +
										date0.getDate();
									date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" +
										date1.getDate();
									res += params[0].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
								}
								// res += "实际天数：" + realDay + "天" + "</br>"
								if (date2 > 0 && date3 > 0) {
									date2 = new Date(date2)
									date3 = new Date(date3)
									date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" +
										date2.getDate();
									date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" +
										date3.getDate();
									res += params[2].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
								}
								return res;
							}
						},
						series: [{
								name: that.$t('project.gantt_timing'),
								type: 'bar',
								stack: 'test1',
								itemStyle: {
									color: 'rgba(0, 0, 0, 0)'
								},
								data: res.PlanWaitDays,
							},
							{
								name: that.$t('project.gantt_schedule'),
								type: 'bar',
								stack: 'test1',
								itemStyle: {
									normal: {
										color: '#4e72b8'
									},
								},
								barGap: 0,
								barWidth: 15,
								data: res.PlanDays,
							},
							{
								name: that.$t('project.gantt_real_time'),
								type: 'bar',
								stack: 'test2',
								itemStyle: {
									normal: {
										color: 'rgba(0,0,0,0)'
									}
								},
								data: res.RealWaitDays
							},
							{
								name: that.$t('project.gantt_actual'),
								type: 'bar',
								stack: 'test2',
								itemStyle: {
									normal: {
										color: '#7fb80e'
									}
								},
								barGap: 0,
								barWidth: 15,
								data: res.RealDays
							},
						],
					}
				})

			},
			changeInput() {
				this.loaded();
			},
			btnClick() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.chart {
		transform: rotate(90deg);
	}

	.echarts {
		// width: calc(104vh - var(--status-bar-height));
		// height: 80vw;
		width: calc(96vh - var(--status-bar-height));
		height: 100vw;
	}

	.fr {
		float: right;
	}

	.echarts-wrap {
		width: 100%;
		height: 300px;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 700px;
	}
</style>
